<template>
  <transition
    :name="'down'"
    :enter-active-class="'transition-active'"
    :leave-active-class="'transition-active'">
  <!-- <div v-show="show" class="urgent-msg"><div></div></div> -->
  <div v-if="show" class="urgent-msg"><MarqueeTextAcross :text="content" delayTime="50"/></div>
  </transition>
</template>

<script>
// import TextMarquee from '@/modules/marquee-text/text-marquee'
import MarqueeTextAcross from '@/modules/marquee-text/MarqueeTextAcross.vue'
import ajaxApi from '@/modules/ajax-api'
export default {
  // name: 'urgent-msg',
  data () {
    return {
      show: false,
      content: ''
    }
  },
  created () {
    this.$bus.$on('urgentMsgUpdate', this.loadData)
  },
  // mounted () {
  //   let {$el: eBox} = this
  //   let eText = eBox.children[0]
  //   this.textMarquee = new TextMarquee({
  //     eBox,
  //     eText,
  //     perSecMove: 40
  //   })
  // },
  destroyed () {
    this.$bus.$off('urgentMsgUpdate', this.loadData)
  },
  methods: {
    loadData () {
      ajaxApi.getNoticeByEquipmentCode(1).then(d => {
        // this.content = d.content
        if (this.timeCompare(d.end_date)) {
          let el = document.createElement('div')
          el.innerHTML = d.content
          this.show = true
          // this.$nextTick(() => {
          //   this.textMarquee.acrossUpdate('通知：' + el.textContent)
          // })
          this.content = '通知：' + el.textContent
        } else {
          this.show = false
          // this.textMarquee.destroy()
        }
      })
    },
    timeCompare (date) {
      return new Date(date).getTime() > Date.now()
    }
  },
  components: {
    MarqueeTextAcross
  }
}
</script>

<style scoped>
  .urgent-msg {
    height: 66px;
    color: #fff;
    position: fixed;
    top:auto;
    bottom: 0;
    font-size: 30px;
    background-color: rgba(42, 71, 80, 0.82);
    width: 100%;
    white-space: nowrap;
    line-height: 2.2;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10px;
    pointer-events: none;
  }
  .down-enter, .down-leave-to {
    transform: translate3d(0, 100%, 0);
  }
</style>
